<template>
  <div class="">
    <my-step v-model.number="val" @input="input"></my-step>
    <div>bianhao: <arrow status="none"></arrow></div>
    <div @click="sortprice">价格 <arrow :status="status"></arrow></div>

    <ul>
      <li v-for="item in res" :key="item.id">
        {{ item.goods_name }}=={{ item.price }}
      </li>
    </ul>

    <my-pagination
      :current-page="pagenum"
      :page-size="pagesize"
      :total="total"
      :page-sizes="[2, 5, 4, 1]"
      @sizeChange="sizeChange"
      @currentChange="handlerChange"
    ></my-pagination>
  </div>
</template>

<script>
import { getBanner } from "@/utils/api/home.js";
import arrow from "@/components/Arrow.vue";
export default {
  data() {
    return {
      val: 12,
      pagenum: 1,
      pagesize: 2,
      list: [],
      total: "",
      status: "up",
    };
  },
  mounted() {
    getBanner().then((res) => {
      console.log(res);
      this.list = res.data;
      this.total = this.list.length;
    });
  },
  computed: {
    res() {
      return this.list.slice(
        (this.pagenum - 1) * this.pagesize,
        this.pagesize * this.pagenum
      );
    },
  },

  methods: {
    input(val) {
      console.log(val);
    },
    sizeChange(size) {
      this.pagesize = size;
    },
    handlerChange(page) {
      this.pagenum = page;
    },
    sortprice() {
      if (this.status == "up") {
        this.list.sort((a, b) => {
          return a.price - b.price;
        });
        this.status = "down";
      } else {
        this.list.sort((a, b) => {
          return b.price - a.price;
        });
        this.status = "up";
      }
    },
  },
  components: {
    arrow,
  },
};
</script>

<style lang="scss"></style>
